<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<style type="text/css">
	.container-box{
		display: flex;
	}
	.semanticui-leftbox{
		flex: 0 0 20vw;
		height: 100vh;
		background-color: #666;
	}
	.rightbox{
		flex: 0 0 80vw;
		height: 100vh;
		background-color: #888;
	}
</style>



<div class="container-box">
	<div class="semanticui-leftbox">
		<!-- 嵌入semanticui框架的侧边栏组件 -->
		<!-- 框架的组件文档 "https://zijieke.com/semantic-ui/modules/sidebar.php" -->
		<div class="ui left demo vertical inverted labeled icon menu" style="height: 100%;width: 100%">
			<a class="item">
				<i class="home icon"></i>
				Home
			</a>
			<a class="item">
				<i class="block layout icon"></i>
				Topics
			</a>
			<a class="item">
				<i class="smile icon"></i>
				朋友
			</a>
		</div>
		<!-- semanticui框架的侧边栏组件结束 -->
	</div>


	<!-- 右侧内容区域 -->
	<div class="rightbox">
		
		
	</div>
</div>

<script type="text/javascript">
	
	//获取列表项
	var navitem=$('.menu .item');
	//为item执行点击事件
	navitem.click(function(){
		console.log($(this).index());
		//dosomething
	});
</script>